{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        {% block meta %}
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <!-- Meta, title, CSS, favicons, etc. -->
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="shortcut icon" href="{% static 'library/imgs/favicon.ico' %}">
        {% endblock meta %}

        <title>书库管理系统 | {% block title %}{% endblock %}</title>

        {% block stylesheets %}
            <!-- Bootstrap -->
            <link href="{% static 'vendors/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
            <!-- Font Awesome -->
            <link href="{% static 'vendors/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
            <!-- NProgress -->
            <link href="{% static 'vendors/nprogress/nprogress.css' %}" rel="stylesheet">
            <!-- bootstrap-daterangepicker -->
            <link href="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet">
            <!-- iCheck -->
            <link href="{% static 'vendors/iCheck/skins/flat/green.css' %}" rel="stylesheet">
            <!-- bootstrap-progressbar -->
            <link href="{% static 'vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css' %}" rel="stylesheet">
            <!-- JQVMap -->
            <link href="{% static 'vendors/jqvmap/dist/jqvmap.min.css' %}" rel="stylesheet"/>
            <!-- Custom Theme Style -->
            <link href="{% static 'library/css/custom.min.css' %}" rel="stylesheet">
            <!-- Custom Theme Style -->
            <link href="{% static 'library/css/base.css' %}" rel="stylesheet">
            <!-- Bootstrap Colorpicker -->
            <link href="{% static 'vendors/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css' %}" rel="stylesheet">
        {% endblock stylesheets %}
        <!-- jQuery -->
        <script src="{% static 'vendors/jquery/dist/jquery.min.js' %}"></script>
        <!-- Bootstrap -->
        <script src="{% static 'vendors/bootstrap/dist/js/bootstrap.min.js' %}"></script>
        <!-- Babel -->
        <script type="text/javascript" src="{% static 'library/js/polyfill.min.js'%}"></script>
        <!-- Vue -->
        <script src="{% static 'library/js/vue.min.js'%}"></script>
        <script src="{% static 'library/js/plugins/jquery-custom-plugin.js'%}"></script>
        <!-- bootstrap-daterangepicker -->
        <script src="{% static 'vendors/moment/min/moment.min.js' %}"></script>
        <script src="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
    {% endblock head %}
</head>

<body class="{% block body_class %}nav-md {% endblock body_class %}">
{% block body %}
    {% include 'components/modal-tip.html' %}
    {% include 'components/modal-confirm-dialog.html' %}
    {% block body_header %}{% endblock body_header %}
    <div class="container body" id="app">
        {% block container_header %}{% endblock container_header %}
        <div class="main_container">
            {% block sidebar %}
                <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
                    {% include "library/base/sidebar.html" %}
                </div>
            {% endblock sidebar %}

            {% block top_navigation %}
                <div class="top_nav">
                    {% include "library/base/top_navigation.html" %}
                </div>
            {% endblock top_navigation %}
            <div class="right_col" role="main">
                {% block main_content %}
                <div class="page-title">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <h3>{{ title|default:"" }} <small>{{ subtitle|default:"" }}</small></h3>
                    </div>
                </div>
                {% block outer_content %}
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                        {% block content %}
                        {% endblock content %}
                        </div>
                    </div>
                    {% block extra_content %}
                    {% endblock extra_content %}
                </div>
                {% endblock outer_content %}
                {% endblock main_content %}
            </div>
            {% block footer %}
            <footer>
                {% include "library/base/footer.html" %}
            </footer>
            {% endblock footer %}
        </div>
    </div>

    {% block javascripts %}
        {% block reload_window_javascript %}
        <script>
            var reload_back_form_success_page = function(){
                var is_success = sessionStorage.getItem('flag_operator_success')
                if(is_success){
                    sessionStorage.removeItem('flag_operator_success');
                    location.reload();
                }
            }
            $(window).on('popstate', reload_back_form_success_page);
            $(window).on('load', reload_back_form_success_page);
            window.API_HOST = "/api/"
        </script>
        {% endblock reload_window_javascript %}
        <!-- FastClick -->
        <script src="{% static 'vendors/fastclick/lib/fastclick.js' %}"></script>
        <!-- NProgress -->
        <script src="{% static 'vendors/nprogress/nprogress.js' %}"></script>
        <!-- bootstrap-progressbar -->
        <script src="{% static 'vendors/bootstrap-progressbar/bootstrap-progressbar.min.js' %}"></script>
        <!-- iCheck -->
        <script src="{% static 'vendors/iCheck/icheck.min.js' %}"></script>
        <!-- bootstrap-wysiwyg -->
        <script src="{% static 'vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js' %}"></script>
        <script src="{% static 'vendors/jquery.hotkeys/jquery.hotkeys.js' %}"></script>
        <script src="{% static 'vendors/google-code-prettify/src/prettify.js' %}"></script>
        <!-- jQuery Tags Input -->
        <script src="{% static 'vendors/jquery.tagsinput/src/jquery.tagsinput.js' %}"></script>
        <!-- Switchery -->
        <script src="{% static 'vendors/switchery/dist/switchery.min.js' %}"></script>
        <!-- Select2 -->
        <script src="{% static 'vendors/select2/dist/js/select2.full.min.js' %}"></script>
        <!-- Parsley -->
        <script src="{% static 'vendors/parsleyjs/dist/parsley.min.js' %}"></script>
        <!-- Autosize -->
        <script src="{% static 'vendors/autosize/dist/autosize.min.js' %}"></script>
        <!-- jQuery autocomplete -->
        <script src="{% static 'vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js' %}"></script>
        <!-- starrr -->
        <script src="{% static 'vendors/starrr/dist/starrr.js' %}"></script>
        <script src="{% static 'library/js/plugins/pnotify.custom.min.js' %}"></script>
        <script src="{% static 'vendors/echarts/dist/echarts.min.js' %}"></script>
        <!-- Bootstrap Colorpicker -->
        <script src="{% static 'vendors/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js' %}"></script>
        <script src="{% static 'library/js/base.js' %}"></script>
        <script src="{% static 'library/js/plugins/modal/modal-dialog.js'%}"></script>
        <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
        <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
    {% endblock %}
{% endblock body %}
</body>
</html>